/* eslint-disable jsx-a11y/control-has-associated-label */
/**
 * 网站的门户页
 */
// import react, react router
import React, { useState } from "react";
import { useOutletContext, useNavigate } from "react-router-dom";
// import mui
import { Paper, List, ListItemButton, ListItemText } from "@mui/material";
//import css
import "../../css/common.css";
import "../../css/portal/index.css";
//import component
import AdvancedSearchButton from "../../components/advancedSearchButton/AdvancedSearchButton";

//import lib
import { CHINESE_SEARCH_MODEL } from "../../components/advancedSearchButton/Common";
import { LilySnack } from "../../components/common/Common";
export default function Portal() {
  /* ---------------------------------------------------------
   *                    Snackbar messages
   * ---------------------------------------------------------*/
  const [snackbarMes, setSnackbarMes] = useState({
    text: undefined,
    open: false,
    severity: "warning",
  });
  const { setSearchData } = useOutletContext();
  const { navigate } = useNavigate();
  //搜索输入的字符
  const [searchStr, setSearchStr] = useState("");
  // 监听搜索文本的变化
  const handleSearchText = (keywords) => {
    setSearchStr(keywords);
  };
  //获取搜索栏的内容将其添加到searchData中去
  const handleSearch = (searchConditionKey, searchConditionValue) => {
    // 检查 searchStr 是否为空
    if (!searchStr.trim()) {
      setSnackbarMes({
        text: "请输入正确的搜索条件",
        open: true,
        severity: "error",
      });
      return; // 如果为空，则不执行后续操作
    }

    setSearchData((currentSearchData) => {
      let newSearchData = { ...currentSearchData };

      if (typeof searchConditionKey === "boolean") {
        newSearchData.fullText = CHINESE_SEARCH_MODEL[searchConditionKey];
        newSearchData.keywords = searchConditionValue;
      }

      return newSearchData;
    });
    //成功改变searchData，跳转
    navigate("/fayucz/legislation");
  };

  return (
    <div>
      <div className="portal-logo">
        <img src="../../assets/images/logo.png" alt="logo" />
      </div>
      <div className="portal-search-container container">
        <div className="portal-search-bar" style={{ position: "relative", height: "100%" }}>
          <input
            className="portal-search"
            type="text"
            placeholder="搜索"
            value={searchStr}
            onChange={(event) => handleSearchText(event.target.value)}
          />
          <button
            className="portal-submit"
            onClick={() => handleSearch(true, searchStr)}
          >
            <i className="iconfont i-fangdajing"></i>
          </button>
        </div>

        <div className="portal-advanced-search">
          <AdvancedSearchButton setSearchData={setSearchData} />
        </div>
        {/**展开栏 */}
        {//TODO 采用热点数据展开
        }
      </div>
      <LilySnack
        duration={snackbarMes.duration}
        open={snackbarMes.open}
        onClose={(event, reason) => {
          if (reason === "clickaway") {
            return;
          }
          setSnackbarMes({ ...snackbarMes, open: false });
        }}
        severity={snackbarMes.severity}
        text={snackbarMes.text}
      />
    </div>
  );
}
